<template>
	<view class="body">
		<view class="status_bar"></view>
		<view class="nav">
			<view class="flex-1" @click="_back">取消</view>
			<view class="nav-center">
				<view>发漫画</view>
				<view class="username">{{ username }}</view>
			</view>
			<view class="nav-btn" @click="_submit">发送</view>
		</view>
		<view class="container">
			<textarea v-model="intro" placeholder="请输入简介..." />
			<u-upload ref="uUpload" :action="action" :file-list="fileList" @on-uploaded="_uploaded" @on-success="_success" :size-type="sizeType" :auto-upload="false"></u-upload>
		</view>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	import { UPLOAD_URL } from '@/common/config.js'
	import { PostArticle } from '@/common/api.js'
	
	export default {
		data() {
			return {
				action: UPLOAD_URL,
				fileList: [],
				sizeType: ['original'],
				images: [],
				intro: ''
			}
		},
		computed: {
			...mapGetters(['username'])
		},
		methods: {
			_back() {
				uni.navigateBack()
			},
			_uploaded(lists, name) {
				this._publish()
			},
			_success(res, index, lists, nam) {
				const { code, data } = res
				if (code === 200) {
					this.images.push(data.url)
				}
			},
			_submit() {
				if (!this.intro) {
					return uni.showToast({
						title: '请输入简介',
						icon: 'none'
					})
				}
				uni.showLoading({
					title: '发布中...'
				})
				this.$refs.uUpload.upload()
			},
			_publish() {
				if (this.images.length < 1) {
					uni.hideLoading()
					return uni.showToast({
						title: '请上传漫画',
						icon: 'none'
					})
				}
				PostArticle({
					type: 4,
					images: this.images,
					intro: this.intro
				}).then(({ code, msg }) => {
					uni.hideLoading()
					uni.showToast({
						title: msg,
						icon: 'none',
						success: () => {
							if (code === 200) {
								this._back()
							}
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 24rpx;
	}
	.flex-1 {
		flex: 1;
	}
	.nav-btn {
		background-image: linear-gradient(-90deg, #FCCF31 10%, #F55555 100%);
		height: 50rpx;
		line-height: 50rpx;
		border-radius: 25rpx;
		text-align: center;
		color: #fff;
		flex: 1;
	}
	.username {
		font-size: 24rpx;
		color: #909399;
	}
	.nav-center {
		text-align: center;
		flex: 5;
	}
	.nav {
		height: 88rpx;
		background-color: #f4f4f5;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 24rpx;
		border-bottom: 1px solid #e7e6e4;
	}
	.status_bar {
        height: var(--status-bar-height);
		background-color: #f4f4f5;
    }
	.body {
		min-height: 100vh;
		background-color: #fff;
	}
</style>
